```tsx {18-31}
const ColorPicker = () => {
  const service = useMachine(colorPicker.machine, {
    id: useId(),
    defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
  })

  const api = colorPicker.connect(service, normalizeProps)

  const presets = ["#ff0000", "#00ff00", "#0000ff"]

  return (
    <div {...api.getRootProps()}>
      {/* ... */}
      <div {...api.getPositionerProps()}>
        <div {...api.getContentProps()}>
          <div {...api.getSwatchGroupProps()}>
            {presets.map((preset) => (
              <button
                key={preset}
                {...api.getSwatchTriggerProps({ value: preset })}
              >
                <div style={{ position: "relative" }}>
                  <div {...api.getTransparencyGridProps({ size: "4px" })} />
                  <div {...api.getSwatchProps({ value: preset })} />
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
```
